<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
#parse("sys/header.html")
<link rel="stylesheet" type="text/css" href="${rc.contextPath}/statics/plugins/wangEditor/dist/css/wangEditor.min.css">
<link rel="stylesheet" type="text/css" href="${rc.contextPath}/css/tool.css"/>
<link type="text/css" rel="stylesheet" href="${rc.contextPath}/statics/plugins/fileinput/css/fileinput.css" />
<script type="text/javascript" src="${rc.contextPath}/statics/plugins/fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="${rc.contextPath}/statics/plugins/fileinput/js/locales/zh.js"></script>
</head>
<body>
<div class="Mcon">
<div id="rrapp" v-cloak>
	<div v-show="showList">
		<div class="row">
			<div class="form-group col-sm-2">
				<div class="input-group">
					<input type="text" class="form-control" v-model="q.title" @keyup.enter="query" placeholder="标题">
					<span class="input-group-btn">
				        <button class="btn btn-default" @click="query">查询</button>
				    </span>
			    </div>
			</div>
			#if($shiro.hasPermission("bannernews:save"))
			<a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
			#end
			#if($shiro.hasPermission("bannernews:update"))
			<a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
			#end
			#if($shiro.hasPermission("bannernews:delete"))
			<a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
			#end
		</div>
	    <table id="jqGrid"></table>
	    <div id="jqGridPager"></div>
    </div>
    
    <div v-show="!showList" class="panel panel-default">
		<div class="panel-heading">{{title}}</div>
		<form class="form-horizontal">
			<div class="form-group">
			   	<div class="col-sm-2 control-label">标题</div>
			   	<div class="col-sm-10">
			      <input type="text" class="form-control" v-model="bannernews.title" placeholder="标题" maxlength="30"/>
			    </div>
			</div>
			<div class="form-group">
			   	<div class="col-sm-2 control-label">url</div>
			   	<div class="col-sm-10">
			      <input type="text" class="form-control" v-model="bannernews.linkUrl" placeholder="请输入url地址"/>
			    </div>
			</div>
			<div class="form-group">
			   	<div class="col-sm-2 control-label">排序</div>
			   	<div class="col-sm-10">
			      <input type="text" class="form-control" v-model="bannernews.rank" placeholder="请输入数字"/>
			    </div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">图片上传</div>
				<div class="col-sm-10">
					<input id="file-0a" class="file-loading" type="file" name="imageFile" >
				</div>
			</div>
			<div class="form-group">
			   	<div class="col-sm-2 control-label">图片</div>
			   	<div class="col-sm-10">
			      <input type="text" class="form-control" v-model="bannernews.image" placeholder="图片" readonly/>
			    </div>
			</div>
			<!-- <div class="form-group">
			   	<div class="col-sm-2 control-label">内容</div>
			   	<div class="col-sm-10">
			      <input type="text" class="form-control" v-model="bannernews.content" placeholder="内容"/>
			    </div>
			</div> -->
			<div class="form-group">
			   	<div class="col-sm-2 control-label">内容</div>
			   	<div class="col-sm-10">
			   		 <textarea id="contentTextarea" name="content" class="form-control standard-input textContent" placeholder="内容" required></textarea>
			    </div>
			</div>
			<!-- <div class="form-group">
			   	<div class="col-sm-2 control-label">状态（0停用-1启用）</div>
			   	<div class="col-sm-10">
			      <input type="text" class="form-control" v-model="bannernews.status" placeholder="状态（0停用-1启用）"/>
			    </div>
			</div> -->
			<div class="form-group">
				<div class="col-sm-2 control-label">状态</div> 
				<label class="radio-inline">
				  <input type="radio" name="status" value="0" v-model="bannernews.status"/> 禁用
				</label>
				<label class="radio-inline">
				  <input type="radio" name="status" value="1" v-model="bannernews.status"/> 正常
				</label>
			</div>
			
			<div class="form-group">
				<div class="col-sm-2 control-label"></div>
				<input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
				&nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="back" value="返回"/>
			</div>
		</form>
	</div>
</div>
</div>
<!-- <script src="${rc.contextPath}/js/generator/bannernews.js?_${date.systemTime}"></script> -->
<script src="${rc.contextPath}/statics/plugins/wangEditor/dist/js/wangEditor.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#jqGrid").jqGrid({
        url: '../bannernews/list',
        datatype: "json",
        colModel: [			
			/* { label: 'id', name: 'id', index: 'id', width: 50, key: true }, */
			{ label: '标题', name: 'title', index: 'title', width: 80 }, 			
			{ label: 'url', name: 'linkUrl', index: 'link_url', width: 80 },
			{ label: '排序', name: 'rank', index: 'rank', width: 30 }, 
			{ label: '图片', name: 'image', width: 50 ,sortable: false ,align: "center",formatter: function(value, options, row){
				return value == null ? '' : '<img src="'+value+'" alt="" width="50px"/>';
			}}, 			
			{ label: '内容', name: 'content', width: 100 ,sortable: false ,formatter:function(value, options,row){
					if(value!=null){
						if(value.length>=65){
							return value.substring(0,65)+"......";
						}else{
							return value;
						}
					}
				}
			}, 			
			{ label: '状态', name: 'status', width: 20 ,sortable: false , formatter: function(value, options, row){
				if(value === 1){
					return '<span class="label label-primary">正常</span>';
				}
				if(value === 0){
					return '<span class="label label-success">禁用</span>';
				}
			}}
        ],
		viewrecords: true,
        height: 510,
        rowNum: 10,
		rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth:true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        gridComplete:function(){
        	//隐藏grid底部滚动条
        	$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
        }
    });
});
var editor;
var vm = new Vue({
	el:'#rrapp',
	data:{
		showList: true,
		title: null,
		q:{
			title: null
		},
		bannernews: {}
	},
	created: function() {
		$(function () {
			editor = new wangEditor('contentTextarea');
			editor.create();
		});
		$(document).on('ready', function() {
			$("#file-0a").fileinput({
				language: 'zh'//设置语言
				,showUpload: true //是否显示上传按钮
		        ,showCaption: true //是否显示标题
		        ,dropZoneEnabled: false //是否显示拖拽区域
				,uploadUrl: '../bannernews/imageUpload'//上传的地址
				,maxFileSize: 1000
				,maxFileCount:1 //表示允许同时上传的最大文件个数
				//,allowedFileTypes: ['image', 'video', 'flash']//文件类型
				,uploadExtraData:{"dirName":'Banner'}
				,allowedFileExtensions: ['jpg', 'gif', 'png']//接收的文件后缀
				,slugCallback: function (filename) {
		            return filename.replace('(', '_').replace(']', '_');
		        }
			}).on("fileuploaded", function (event, data, previewId, index) {
				//console.log(data);
				console.log(data.response);
				vm.bannernews.image = data.response.imagestr;
			});
		});
    },
	methods: {
		query: function () {
			vm.reload();
		},
		add: function(){
			vm.showList = false;
			vm.title = "新增";
			vm.bannernews = {status:1,image:null};
		},
		update: function (event) {
			var id = getSelectedRow();
			if(id == null){
				return ;
			}
			vm.showList = false;
            vm.title = "修改";
            
            vm.getInfo(id)
		},
		saveOrUpdate: function (event) {
			var url = vm.bannernews.id == null ? "../bannernews/save" : "../bannernews/update";
			if(vm.bannernews.image==null){
				return alert("图片没有上传");
			}
			//vm.bannernews.content = editor.$txt.html();
			vm.bannernews.content = encodeURI(editor.$txt.html());
			$.ajax({
				type: "POST",
			    url: url,
			    contentType: "application/json",
			    data: JSON.stringify(vm.bannernews),
			    success: function(r){
			    	if(r.code === 0){
						alert('操作成功', function(index){
							editor.$txt.html("");
							//vm.reload();
							window.location.reload();
						});
					}else{
						alert(r.msg);
					}
				}
			});
		},
		del: function (event) {
			var ids = getSelectedRows();
			if(ids == null){
				return ;
			}
			
			confirm('确定要删除选中的记录？', function(){
				$.ajax({
					type: "POST",
				    url: "../bannernews/delete",
				    contentType: "application/json",
				    data: JSON.stringify(ids),
				    success: function(r){
						if(r.code == 0){
							alert('操作成功', function(index){
								$("#jqGrid").trigger("reloadGrid");
							});
						}else{
							alert(r.msg);
						}
					}
				});
			});
		},
		getInfo: function(id){
			$.get("../bannernews/info/"+id, function(r){
                vm.bannernews = r.bannernews;
                var editorhtml = r.bannernews.content;
                editor.$txt.html(editorhtml);
            });
		},
		reload: function (event) {
			vm.showList = true;
			var page = $("#jqGrid").jqGrid('getGridParam','page');
			$("#jqGrid").jqGrid('setGridParam',{ 
				postData:{'title': vm.q.title},
                page:page
            }).trigger("reloadGrid");
		},
		back: function (event){
			window.location.reload();
		}
	}
});
</script>
</body>
</html>